<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>4_getSnapShotBeforeUpdate的使用场景</title>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
	<style>
		.list {
			width: 200px;
			height: 150px;
			background-color: skyblue;
			overflow: auto;
		}

		.news {
			height: 30px;
		}
	</style>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>



	<script type="text/babel">
		class NewsList extends React.Component {
			state = { newsArr: [] }

			componentDidMount() {
				setInterval(() => {
					const { newsArr } = this.state
					const news = '新闻' + (newsArr.length + 1)
					this.setState({ newsArr: [news, ...newsArr] })
				}, 1000)
			}

			getSnapshotBeforeUpdate() {
				return this.refs.list.scrollHeight
			}

			render() {
				return (
					<div className="list" ref="list">
						{
							this.state.newsArr.map((item, index) => {
								return <div className="news" key={index}>{item}</div>
							})
						}
					</div>
				)
			}

			componentDidUpdate(preprops, prestate, height) {
				this.refs.list.scrollTop += this.refs.list.scrollHeight - height
			}
		}

		ReactDOM.render(<NewsList />, document.getElementById('test'))
	</script>
</body>

</html>